import React from 'react';
// 引入图标
import { LockOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space } from 'antd';
// 引入验证码组件
import Captcha from './Captcha';
// 导入的登录接口
import { loginFn } from '@/api/login.js'
import { useState, useRef } from 'react';
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux'
const Normallogin = () => {
    const [key, setKey] = useState('');

    // 创建ref 引用对象
    const ref1 = useRef()

    // 创建dispatch 函数
    const dispatch = useDispatch();

    // 创建his 对象
    const his = useHistory()
    // 点击提交
    const onFinish = (values) => {
        values.key = key
        console.log('Received values of form: ', values);

        // 调用登录接口
        loginFn(values).then(res => {
            console.log(res);
            if (res.data.errNo == 0) {
                //01: 表示登录成功 正确提示(在axios中统一处理了)

                //02: 跳转到首页
                his.push('/dashboard');
                //03:存储token等登录信息
                // dispatch({
                //     type: 'setToken',
                //     payload: res.data.context.jwt
                // })
                localStorage.setItem('jwt', res.data.context.jwt)

                //04:存储菜单项
                dispatch({
                    type: 'setAcl',
                    payload: res.data.context.acl
                })

            } else {
                //01: 登录失败 错误提示
                //02: 刷新验证码
                ref1.current.initCaptchaFn();
                //03: 清空表单项
                // 清空表单的两种方式 
                // 方式1: 使用form 实例执行 setFieldsValue 方法清空表单
                // form.setFieldsValue({
                //     username: '',
                //     password: '',
                //     captcha: ''
                // })

                // 方法2: 使用 useRef 执行 resetFields 方法重置表单
                formRef.current?.resetFields();
            }
        })
    };

    // 传递给子组件的函数,然后在子组件中调用获取key
    const getKey = (key) => {
        //console.log('key', key); // 子组件传递过来的参数
        setKey(key)
    }

    //方法1:  获取form 表单实例
    const [form] = Form.useForm();
    // console.log('form', form);
    //方法2: 获取form 
    const formRef = React.useRef(null);

    return (
        <div>
            <Form
                name="normal_login"
                className="login-form"
                onFinish={onFinish}
                // 方法1:  获取form 表单实例
                form={form}
                // 方法2: 获取form 
                ref={formRef}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名!',
                        },
                    ]}
                >
                    <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                    ]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                        size='large'
                    />
                </Form.Item>
                <Space>
                    <Form.Item
                        name="captcha">
                        <Input
                            prefix={<KeyOutlined className="site-form-item-icon" />}
                            type="text"
                            placeholder="验证码"
                            size='large'

                        />
                    </Form.Item>
                    <Form.Item>
                        {/* 验证码组件 */}
                        <Captcha ref={ref1} getKey={getKey}></Captcha>
                    </Form.Item>
                </Space>


                <Form.Item>
                    <Button block type="primary" size='large' htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Normallogin;
